import React from 'react';
import ReactDOM from 'react-dom';
import { toJS } from "mobx";
import { observer } from "mobx-react";
import { createHashHistory } from 'History';
import { Router, Route, useRouterHistory } from 'react-router';

import { Table, message } from 'antd';
import TableN from 'antd/lib/table/index.js';
import { WeaTools } from 'ecCom';
import { WeaTableNew } from 'comsMobx';
const { WeaTable, TableStore } = WeaTableNew;
const { callApi } = WeaTools;

const tableStore = new TableStore();

const history = useRouterHistory(createHashHistory)({
  queryKey: '_key',
  basename: '/',
});

const colLen = new Array(10).join(',').split(',');
const dattLen = new Array(100).join(',').split(',');

// const props = {
//   columns: colLen.map((c, i) => ({
//     dataIndex: `col_${i}`,
//     title: `col_${i}`,
//   })),
//   dataSource: dattLen.map((d, i) => {
//     const data = {};
//     colLen.forEach((c, j) => {
//       data[`col_${j}`] = `data_${i}`
//     });
//     return data;
//   }),
//   useFixedHeader: true,
//   scroll: { y: 400 },
//   pagination: false
// }

@observer
class Main extends React.Component {
  state = {
    time: 0,
  }
  componentDidMount() {
    // this.mountTime = new Date().getTime();
    // this.setState({ time: this.mountTime - this.startRender });
    callApi(
      '/api/system/systemPagePerformanceLog/selectSystemPagePerformanceLog',
      'POST',
    ).then(result => {
      tableStore.getDatas(result.datas, 1, undefined, this.state.sortParams);
    }).catch(e => {
      message.error('接口错误');
    })
  }
  componentDidUpdate() {
    if (this.startRender && !this.mountTime) {
      this.mountTime = new Date().getTime();
      this.setState({ time: this.mountTime - this.startRender });
    }
  }
  render() {
    if (!this.startRender && tableStore.datas.length) {
      this.startRender = new Date().getTime();
    }
    const props = {
      columns: toJS(tableStore.columns),
      dataSource: toJS(tableStore.datas),
      useFixedHeader: true,
      scroll: { y: 600 },
      pagination: 100,
    }
    const { time } = this.state;
    if (this.props.location.pathname === '/table') {
      return [time, <Table {...props} />];
    }
    return [time, <TableN {...props} />];
    return [time, <WeaTableNew store={tableStore} hasScroll={true}/>]
  }
}

const Root = () => (
  <Router history={history}>
    <Route name='/' path='/' component={() => null} />
    <Route name='/table' path='/table' component={Main} />
    <Route name='/tableAntd' path='/tableAntd' component={Main} />
  </Router>
);

ReactDOM.render(<Root />, document.getElementById('container'));